<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title"><strong>jQuery 插件Validation 表单验证</strong></h3>
	</div>
	<div class="panel-body">
		<h3><strong>关于</strong></h3>
		<p>表单验证是Web开发中最常见的流程，一般分为前端js验证，和后端服务器脚本验证两部分。前端js验证不是必须，但为了加强用户体验，却又往往是必不可少。但很多重复的表单验证却花去了开发人员大量宝贵时间。jQuery Validation Plugin为一款简单好用的表单验证插件.。<br />
			兼容IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62。</p>
		<h3><strong>通过HTML文档data属性</strong></h3>
		<p>仅仅通过向页面元素添加<code>data-sea="Validator"</code> 就可以为表单赋予Validation表单验证功能。<br />
			<code>< form action="URL" method="ajax/debug/post/get" data-sea="Validate" data-msgTime="2" data-async="true" data-callback="callback" ></code><br />
			以下是其他相关属性：
		<ul>
			<li><code>action</code> 属性接受一个URL地址，指定表单提交方向；</li>
			<li><code>method</code> 属性接受一个字符串，在原有method属性基础上扩展增加了ajax（Ajax方式提交）、debug（仅验证不提交），默认是ajax；</li>
			<li><code>data-async</code> 属性接受一个布尔值，指定表单验证是否使用异步加载方式，当为True时，自动为提交按钮添加disabled属性，任何一个input,select,textarea元件获得焦点时触发加载，并将提交按钮的disabled属性删除。默认为True；</li>
			<li><code>data-msgTime</code> 属性接受一个数字值，代表消息提示框多长时间后消失，默认值是5秒；</li>
			<li><code>data-callback</code> 属性接受一个回调函数的名称，默认是空；本回调函数提供三个参数：data（表单提交数据序列化后的字符串）, note（Ajax返回的Json对象）, mess（提示框对象，用于操作提示框）</li>
		</ul>
		</p>
		<h3><strong>注意：在弹框表单中此处定义的回调函数在表单验证提交成功触发关闭弹框后触发。如需要在弹框关闭事件前触发，请在弹框处指定回调函数。</strong></h3>
		<h3><strong>特别注意：在哪里和如何自定义回调函数?</strong></h3>
		<p>请在seaJS的入口位置，使用 <code>jQuery.extend(object)</code>的方式，或者 <code>function callback(){}</code>方式设定回调函数，例如：
		<pre data-sea="seaSnippet" data-config="seaSnippet" data-option="language:'javascript'">
seajs.use(['seajs-control', 'bootstrap'], function(){
	function callback0(){
		some code ...
	}
	$.extend({
		callback: function(){
			some code...
			alert(101)
		}
	})
})</pre>
		<div class="bs-example">
			<div class="bs-sidebar sea-example">
<form action="/Index/test" method="ajax" class="form-horizontal" data-sea="Validator" data-option="async:false">
	<div class="form-group">
		<label for="realname" class="col-sm-2 control-label">真实姓名</label>
		<div class="col-sm-10">
			<input class="form-control realname" id="realname" type="text" name="realname" placeholder="填入您的真实姓名" />
		</div>
	</div>
	<div class="form-group">
		<label for="idcard" class="col-sm-2 control-label">证件号码</label>
		<div class="col-sm-10">
			<input class="form-control" id="idcard" type="text" name="idcard" placeholder="填入您的证件号码" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">出生日期</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" placeholder="填写出生日期" id="datepicker" name="datepicker" data-sea="Calendar" />
		</div>
	</div>
	<div class="form-group">
		<label for="mobile" class="col-sm-2 control-label">联系手机</label>
		<div class="col-sm-10">
			<input class="form-control ignore" id="mobile" type="text" name="mobile" placeholder="填入您的联系手机" />
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">所在地区</label>
		<div class="col-sm-10" data-sea="community">
			<div class="col-sm-4 city resideprovince"></div>
			<div class="col-sm-4 city residecity"></div>
			<div class="col-sm-4 city residedist"></div>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">您的性别：</label>
		<div class="col-sm-8" data-sea="RadioCheckbox" placeholder="请选择您的性别">
			<input type="radio" id="gender1" name="gender"><label for="gender1"><i class="icon-user"></i> 男士</label>
			<input type="radio" id="gender2" name="gender"><label for="gender2"><i class="icon-girl"></i> 女士</label>
		</div>
	</div>
	<button class="btn btn-info btn-block" type="submit">确认修改</button>
</form>
			</div>
		</div>
		<br />
		<pre data-sea="seaSnippet" data-config="seaSnippet">
&lt;form action=&quot;/Index/test&quot; method=&quot;ajax&quot; class=&quot;form-horizontal&quot; data-sea=&quot;Validate&quot; data-option=&quot;async:false&quot;&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label for=&quot;realname&quot; class=&quot;col-sm-2 control-label&quot;&gt;&#30495;&#23454;&#22995;&#21517;&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input class=&quot;form-control realname&quot; id=&quot;realname&quot; type=&quot;text&quot; name=&quot;realname&quot; placeholder=&quot;&#22635;&#20837;&#24744;&#30340;&#30495;&#23454;&#22995;&#21517;&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label for=&quot;idcard&quot; class=&quot;col-sm-2 control-label&quot;&gt;&#35777;&#20214;&#21495;&#30721;&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input class=&quot;form-control&quot; id=&quot;idcard&quot; type=&quot;text&quot; name=&quot;idcard&quot; placeholder=&quot;&#22635;&#20837;&#24744;&#30340;&#35777;&#20214;&#21495;&#30721;&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label class=&quot;col-sm-2 control-label&quot;&gt;&#20986;&#29983;&#26085;&#26399;&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;&#22635;&#20889;&#20986;&#29983;&#26085;&#26399;&quot; id=&quot;datepicker&quot; name=&quot;datepicker&quot; data-sea=&quot;Calendar&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label for=&quot;mobile&quot; class=&quot;col-sm-2 control-label&quot;&gt;&#32852;&#31995;&#25163;&#26426;&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot;&gt;
			&lt;input class=&quot;form-control ignore&quot; id=&quot;mobile&quot; type=&quot;text&quot; name=&quot;mobile&quot; placeholder=&quot;&#22635;&#20837;&#24744;&#30340;&#32852;&#31995;&#25163;&#26426;&quot; /&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-group&quot;&gt;
		&lt;label class=&quot;col-sm-2 control-label&quot;&gt;&#25152;&#22312;&#22320;&#21306;&lt;/label&gt;
		&lt;div class=&quot;col-sm-10&quot; data-sea=&quot;Reside&quot;&gt;
			&lt;div class=&quot;col-sm-4 city resideprovince&quot;&gt;&lt;/div&gt;
			&lt;div class=&quot;col-sm-4 city residecity&quot;&gt;&lt;/div&gt;
			&lt;div class=&quot;col-sm-4 city residedist&quot;&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;button class=&quot;btn btn-info btn-block&quot; type=&quot;submit&quot;&gt;&#30830;&#35748;&#20462;&#25913;&lt;/button&gt;
&lt;/form&gt;</pre>
	</div>
</div>
